import axios from 'axios'
// 7月9号------------------7月9号----------------
// 导入仓库
import store from '../store/index.js'
// import { MessageBox, Message } from 'element-ui' // 项目自带的不需要用
// import store from '@/store' // 项目自带的不需要用
// import { getToken } from '@/utils/auth' // 项目自带的不需要用

// 7月8号------------------7月8号----------------
// 导入Element的弹框插件
import { Message } from 'element-ui'
// create an axios instance
const service = axios.create({
  // 7月8号------------------7月8号----------------备注备注
  // 这里的VUE_APP_BASE_API是在根目录的.env.development文件里面(是一个基地址)
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
// 7月8号------------------7月8号----------------
// 删除了原有的响应拦截器,然后根据上面得const service里面的 VUE_APP_BASE_API去修改地址(修改环境变量)
// 查询到VUE_APP_BASE_API是在跟目录.env.development里面,的VUE_APP_BASE_API = '/dev-api'后修改为 VUE_APP_BASE_API = 'http://localhost:3000/api'(查询出来后有3个,修改的是顶部第一个的)
// 111,添加请求拦截器 官网网址(http://www.axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8)
// 7月9号------------------7月9号-------------------
// 111,添加请求拦截器
service.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么
    // 添加token,为什么需要在请求里面带token,是因为很多接口必须要登陆之后才能调用,而登陆之后,本地级㕛token
    // 本地有token就加上去,如果本地没有token就不加(因为没有token就是undefined)
    // 我怎么知道本地有没有token呢?之前就把token保存到vuex仓库了
    if (store.getters.token) {
      // 判断有token就带 (Bearer是固定的中间有一个空格记得哦)这里使用模板字符串哦
      config.headers.Authorization = `Bearer ${store.getters.token}`
    }
    // 然后这个返回值里面,如果本地有token,就会带到请求中,这样的话后续所有的请求,都不需要人为的去带token了
    // 这个就是请求拦截器带token的作用
    return config
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 222,添加响应拦截器
// 7月8号------------------7月8号----------------
// 注意注意,除非是状态码500或者404,其他不管是请求异常,还是成功都能调用接口,
// 所以请求异常或者成功的,判断逻辑需要定义在response里面
service.interceptors.response.use(
  function(response) {
    // 这里的打印的结果,不管是请求异常还是成功都能拿到(所以就根据这个信息去做判断)
    // 密码错误返回的数据有 message:'用户密码错误' success:fasle
    // 密码正确返回的数据有 message:'登陆成功' success:true
    // 请求成功后的data: "c53d2d9f-39ea-4c80-a0de-34cbd26264da"(这个就是登陆成功的token)
    // --------------------------------------------
    // 这里能拿到用户登陆成功的token,那就把他保存一下(方便后续使用)
    // (然后注意一点,目前这个项目的token很多地方需要用到,那就保存到vuex仓库最合适,直接通过仓库即可获取)
    // 将token保存在store/modules/user.js里面去(user用户的意思)
    // 以前用的工具函数保存的token,所以每次要用都需要导入工具函数,然后再调用,
    // console.log('response', response)
    // es6的解构(相当于把服务器返回的字段取出来了)
    const { success, data, message } = response.data
    if (success === true) {
      // 请求成功
      return data
    } else {
      // 弹出提示的失败信息(注意注意,这个弹框需要手机号码和密码效验通过才能显示)
      // 如果手机号格式和密码的长度不对,直接表单校验的错误,
      Message.error(message)
      // 请求失败,然后返回错误信息new Error(message)
      return Promise.reject(new Error(message))
    }
    // 对响应数据做点什么
    return response
  },
  function(error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default service
